import React from 'react'
import { Drawer, Empty, Skeleton, Timeline } from 'antd'
interface IProps {
  isLogShow: boolean
  setisLogShow: React.Dispatch<React.SetStateAction<boolean>>
  logLoading: boolean
  logInfos: any[]
  setLogInfos: React.Dispatch<React.SetStateAction<any[]>>
}
const LogsDrawer = (props: IProps) => {
  const { isLogShow, setisLogShow, logLoading, logInfos, setLogInfos } = props
  return (
    <Drawer
      title="操作日志"
      open={isLogShow}
      maskClosable
      onClose={() => {
        setisLogShow(false)
        setLogInfos([])
      }}
    >
      <Skeleton
        loading={logLoading}
        active
        paragraph={{
          rows: 6,
        }}
      >
        {logInfos && logInfos.length > 0 ? (
          <Timeline mode="left" items={logInfos}></Timeline>
        ) : (
          <Empty
            style={{
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          />
        )}
      </Skeleton>
    </Drawer>
  )
}
export default LogsDrawer
